<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>数字看板</title>
    <link rel="stylesheet" href="../static/css/common.css" />
    <link rel="stylesheet" href="../static/css/page9.css" />
    <link rel="stylesheet" href="../static/css/carousel.css" />
  </head>
  <body>
    <div id="app">
      <div class="header"></div>
      <div class="main-content">
        <div class="left-container">
          <div class="table-container">
            <div class="title">销售地图</div>
            <div class="chart-container">
              <div class="map" id="map"></div>
              <div class="map-change">
                <ul>
                  <li class="active">中国地图</li>
                  <li>世界地图</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="table-container">
            <div class="title">数据统计(总数)</div>
            <div class="chart-container" id="pie"></div>
          </div>
          <div class="table-container">
            <div class="title">
              <span>近几年销售额对比</span>
              <span class="unit">万元</span>
            </div>
            <div class="chart-container" id="bar"></div>
          </div>
        </div>
        <div class="middle-container">
          <div class="sum-list">
            <div class="sum-detail">
              <div class="icon icon1"></div>
              <div class="icon-text">
                <span class="text-name">客户数</span>
                <span class="text-number"><span>350</span>个</span>
              </div>
            </div>
            <div class="sum-detail">
              <div class="icon icon2"></div>
              <div class="icon-text">
                <span class="text-name">销售额</span>
                <span class="text-number"><span>10455</span>万元</span>
              </div>
            </div>
            <div class="sum-detail">
              <div class="icon icon3"></div>
              <div class="icon-text">
                <span class="text-name">交付数</span>
                <span class="text-number"><span>1360</span>个</span>
              </div>
            </div>
          </div>
          <div class="carousel" id="caro1">
            <div class="caro-main">
              <ul>
                <li>
                  <img src="../static/img/page9/img1.png" alt="" />
                  <div class="caro-text">
                    <p class="name">黄铜热锻*精加工件</p>
                    <p>Brass Hot Stamping Machining Part</p>
                  </div>
                </li>
                <li>
                  <img src="../static/img/page9/分液器头.png" alt="" />
                  <div class="caro-text">
                    <p class="name">黄铜热锻*精加工件</p>
                    <p>Brass Hot Stamping Machining Part</p>
                  </div>
                </li>
                <li>
                  <img src="../static/img/page9/分液器组件.png" alt="" />
                  <div class="caro-text">
                    <p class="name">黄铜热锻*精加工件</p>
                    <p>Brass Hot Stamping Machining Part</p>
                  </div>
                </li>
                <li>
                  <img src="../static/img/page9/单向阀.png" alt="" />
                  <div class="caro-text">
                    <p class="name">黄铜热锻*精加工件</p>
                    <p>Brass Hot Stamping Machining Part</p>
                  </div>
                </li>
                <li>
                  <img src="../static/img/page9/加液头.png" alt="" />
                  <div class="caro-text">
                    <p class="name">黄铜热锻*精加工件</p>
                    <p>Brass Hot Stamping Machining Part</p>
                  </div>
                </li>
                <li>
                  <img src="../static/img/page9/油分离器.png" alt="" />
                  <div class="caro-text">
                    <p class="name">黄铜热锻*精加工件</p>
                    <p>Brass Hot Stamping Machining Part</p>
                  </div>
                </li>
              </ul>
            </div>
            <div class="caro-tab" style="left: 36%; bottom: 10px">
              <ul>
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="right-container">
          <div class="table-container">
            <div class="title">企业介绍</div>
            <div class="chart-container factory">
              <img src="../static/img/page9/img.png" alt="" />
              <div class="tooltip-factory-text">
                台州市通力制冷元件有限公司是浙江台通旗下
                核心企业，公司成立于1992年，目前台州路桥生产基地44622M2拥有员工
                300多人，台州滨海生产基地70696M2，并于...
              </div>
            </div>
          </div>
          <div class="table-container">
            <div class="title">
              <span>新增订单</span>
              <span class="unit">万元</span>
            </div>
            <div class="chart-container" id="line"></div>
          </div>
          <div class="table-container">
            <div class="title">
              <span>重要订单完成度</span>
            </div>
            <div class="chart-container caro-main" id="vticker">
              <ul>
                <li>
                  <div class="order-list">
                    <div class="name">
                      <span>订单信息</span> HD-154413457121341
                    </div>
                    <div class="detail">
                      <div class="num"><span>382</span> / 600</div>
                      <div class="progress">
                        <div class="inner" style="width: 65%"></div>
                      </div>
                    </div>
                  </div>
                  <div class="order-list">
                    <div class="name">
                      <span>订单信息</span> HD-154413457121341
                    </div>
                    <div class="detail">
                      <div class="num"><span>382</span> / 600</div>
                      <div class="progress">
                        <div class="inner red" style="width: 55%"></div>
                      </div>
                    </div>
                  </div>
                  <div class="order-list">
                    <div class="name">
                      <span>订单信息</span> HD-154413457121341
                    </div>
                    <div class="detail">
                      <div class="num"><span>382</span> / 600</div>
                      <div class="progress">
                        <div class="inner" style="width: 75%"></div>
                      </div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="order-list">
                    <div class="name">
                      <span>订单信息</span> HD-154413457121341
                    </div>
                    <div class="detail">
                      <div class="num"><span>382</span> / 600</div>
                      <div class="progress">
                        <div class="inner" style="width: 75%"></div>
                      </div>
                    </div>
                  </div>
                  <div class="order-list">
                    <div class="name">
                      <span>订单信息</span> HD-154413457121341
                    </div>
                    <div class="detail">
                      <div class="num"><span>382</span> / 600</div>
                      <div class="progress">
                        <div class="inner red" style="width: 75%"></div>
                      </div>
                    </div>
                  </div>
                  <div class="order-list">
                    <div class="name">
                      <span>订单信息</span> HD-154413457121341
                    </div>
                    <div class="detail">
                      <div class="num"><span>382</span> / 600</div>
                      <div class="progress">
                        <div class="inner" style="width: 75%"></div>
                      </div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="order-list">
                    <div class="name">
                      <span>订单信息</span> HD-154413457121341
                    </div>
                    <div class="detail">
                      <div class="num"><span>382</span> / 600</div>
                      <div class="progress">
                        <div class="inner" style="width: 75%"></div>
                      </div>
                    </div>
                  </div>
                  <div class="order-list">
                    <div class="name">
                      <span>订单信息</span> HD-154413457121341
                    </div>
                    <div class="detail">
                      <div class="num"><span>382</span> / 600</div>
                      <div class="progress">
                        <div class="inner" style="width: 75%"></div>
                      </div>
                    </div>
                  </div>
                  <div class="order-list">
                    <div class="name">
                      <span>订单信息</span> HD-154413457121341
                    </div>
                    <div class="detail">
                      <div class="num"><span>382</span> / 600</div>
                      <div class="progress">
                        <div class="inner red" style="width: 75%"></div>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="../static/libs/jquery.min.js"></script>
  <script src="../static/libs/echarts.min.js"></script>
  <script src="../static/libs/scaleScreen.js"></script>
  <script src="../static/libs/china.js"></script>
  <script src="../static/libs/world.js"></script>
  <script src="../static/libs/vticker/jquery.vticker.min.js"></script>
  <script src="../static/js/carousel.js"></script>
  <script src="../static/js/page9.js"></script>
</html>
